<template>
	<view class='page'>

		<!-- 电影列表容器 start -->
		<view class="container">
<!-- <view class="url" @click="nav">
	返回
</view> -->
			<!-- 单部电影 start -->
			<view class="movie-wrapper" v-for="item in movieList">
				<!-- 广告图片	 -->
				<view class="poster-wrapper">
					<!-- <image :src="item.poster" class="poster"></image> -->
					<video :src="item.trailer" controls class="poster"></video>
				</view>

				<!-- 电影详情 -->
				<view class="movie-detail">
					<view class="movie-title">{{item.title}}</view>
					<view class="movie-catagory">{{item.catagory}}</view>
					<view class="movie-desc">{{item.desc}}</view>
					<view class="movie-score">
						评分:
						<label class="movie-score-value"> {{item.score}} </label>
					</view>
					<view class="movie-rating">
						<uni-rate :max="5" :value="4.5"></uni-rate>
					</view>
				</view>

				<!-- 购票 -->
				<view class="moive-buy">
					<button type="primary" class='btn' @click="buy">购票</button>
				</view>

			</view>
			<!-- 单部电影 end -->



		</view>
		<!-- 电影列表容器 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				movieList: []
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})

			uni.request({
				url: 'https://www.fastmock.site/mock/9622fedc10c4460c973964c75742c970/bda01/api/movie/guessulike/list',
				method: "POST",
				success: (res) => {
					if (res.statusCode == 200) {
						this.movieList = res.data.data;
						// console.log(this.movieList);
					
					}
				},
				complete() {
					uni.hideLoading();
				
				}
			})
		},
		methods: {
buy(){
	uni.navigateTo({
		url:"../movie-buy/movie-buy"
	})
}
		}
	}
</script>

<style>
	.container {
		margin: 20upx 20upx;
	}

	.movie-wrapper {
		display: flex;
		flex-direction: row;
	}

	.poster-wrapper {
		padding: 5upx 5upx;
	}

	.poster {
		width: 200upx;
		height: 270upx;
	}

	.movie-detail {
		margin-left: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 50%;
	}

	.moive-buy {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.movie-title {
		font-weight: bold;
		font-size: 18px;
		/* 下面三句话是用省略号来代替超长部分 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.movie-score-value {
		color: #ff0000;
		font-size: 18px;
		font-weight: bold;
		margin-left: 10upx;
	}

	.btn {
		width: 100upx;
		height: 180upx;
		display: flex;
		justify-content: center;
		align-items: center;

	}
</style>